<template>
  <div>
    <div v-if="!ready" class="not-ready">not-ready</div>
    <div v-else class="ready">ready</div>

    <div v-if="ready" class="parent">
      <div class="child ready"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'component-with-if',
  data: () => ({
    ready: false
  })
}
</script>
